<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <#include "../../common/header.ftl">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>

    <link rel="stylesheet" href="${base}/res/js/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="/res/js/zTree_v3/js/jquery.ztree.all.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <#include "../../common/left-nav.ftl">

    <div class="main-box">
        <div class="crumbs">
            <ul class="sub-nav">
                <li><a href="${base}/admin/system">账号管理</a></li>
                <li class="active">角色权限</li>
                <li><a href="${base}/admin/system/dataset">数据字典</a></li>
            </ul>
        </div>

        <div class="search-bar">
            <input type="text" placeholder="输入名称查询" id="searchBox">
            <a href="javascript:openModal(-1)" class="btn btn-default btn-in-input">
                <span class="glyphicon glyphicon-plus"></span>
            </a>
        </div>
        <div style="padding: 10px">
            <table id="table"></table>
        </div>

    </div>
</div>

<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">编辑</h4>
            </div>
            <div class="modal-body">
                <form id="dataForm">
                    <input type="hidden" name="id">
                    <div class="form-group">
                        <label>角色名</label>
                        <input type="text" class="form-control" name="name" placeholder="角色名称">
                    </div>
                    <div class="form-group">
                        <label>代码</label>
                        <input type="text" class="form-control" name="code" placeholder="角色代码">
                    </div>
                    <div class="form-group">
                        <label>备注</label>
                        <input type="text" class="form-control" name="remark" placeholder="角色说明">
                    </div>

                    <div class="form-group">
                        <label>资源</label>
                        <ul id="treeData" class="ztree"></ul>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveData()">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    var dataTable, treeObj;
    $(document).ready(function () {
        dataTable = $('#table');
        dataTable.bootstrapTable({
            sidePagination: 'server',
            pagination: true,
            url: API_UCENTER_ROLE_PAGE,
            ajaxOptions: {
                headers: {
                    access_token: getToken()
                }
            },
            responseHandler: function (res) {
                return {
                    "total": res.total,//总页数
                    "rows": res.list   //数据
                };
            },
            columns: [
                {field: 'id', title: 'ID', visible: false},
                {field: 'name', title: '角色名称', width: 200},
                {field: 'remark', title: '描述'},
                {
                    field: 'carrier', title: '编辑', width: 200, align: 'center', formatter: function (value, row) {
                        return '<a href="javascript:openModal(' + row.id + ')">编辑</a> | ' +
                            '<a href="javascript:removeData(' + row.id + ')">删除</a>';
                    }
                }
            ]
        });

        $.httpclient.get(API_UCENTER_USER + '/res', {
            time: new Date().getTime()
        }, function (data) {
            $(data.obj).each(function () {
                this['open'] = true;
            });
            var setting = {
                check: {
                    enable: true
                },
                data: {
                    key: {
                        name: 'displayName'
                    },
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "fid",
                        rootPId: -1
                    }
                }
            };

            $.fn.zTree.init($("#treeData"), setting, data.obj);
            treeObj = $.fn.zTree.getZTreeObj("treeData");
        })
    });

    function openModal(userId) {
        var $form = $('#dataForm');
        $form[0].reset();
        treeObj.checkAllNodes(false);
        if (userId !== null && userId > 0) {
            $.httpclient.get(API_UCENTER_ROLE + "/" + userId, null, function (data) {
                for (var field in data.obj) {
                    var $input = $($form.find('input[name=' + field + ']'));
                    $input.val(data.obj[field]);
                }
                for (var i = 0; i < data.obj.resources.length; i++) {
                    var item = data.obj.resources[i];
                    var node = treeObj.getNodeByParam("id", item.id, null);
                    treeObj.checkNode(node, true, false);
                }
            })
        }
        $('#dataModal').modal('show');
    }

    function saveData() {
        var $form = $('#dataForm');
        var formData = {};

        $form.find('input').each(function () {
            formData[this.name] = this.value;
        });

        var nodes = treeObj.getCheckedNodes(true);
        var resIds = [];
        $(nodes).each(function () {
            resIds.push(this.id);
        });

        formData['resIds'] = resIds;

        if (formData.id === '' || formData.id === null) {
            $.httpclient.post(API_UCENTER_ROLE, JSON.stringify(formData), function (data) {
                dataTable.bootstrapTable('refresh');
                $('#dataModal').modal('hide');
            });
        } else {
            $.httpclient.put(API_UCENTER_ROLE, JSON.stringify(formData), function (data) {
                dataTable.bootstrapTable('refresh');
                $('#dataModal').modal('hide');
            });
        }
    }

    function removeData(roleId) {
        bootbox.confirm({
            size: "small",
            message: '是否删除该角色?',
            buttons: {
                confirm: {
                    label: '是',
                    className: 'btn-danger'
                },
                cancel: {
                    label: '否',
                    className: 'btn-success'
                }
            },
            callback: function (result) {
                if (result) {
                    $.httpclient.delete(API_UCENTER_ROLE + "?id=" + roleId, {
                        time: new Date().getTime()
                    }, function () {
                        dataTable.bootstrapTable('refresh');
                    });
                }
            }
        });
    }
</script>